<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- vue引入 -->
    <script src="./vue.min.js"></script>
    <!-- 引入vue router -->
    <script src="./vue-router.min.js"></script>
  </head>

  <body>
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
          template: '<h1>User 组件 -- 用户id为:{{id}} </h1>',
          methods: {
         
          },
          created() {

            console.log(this.$route)
          },
          computed: {
            id() {
              return this.$route.params.id   // 使组件的耦合度会比较高
            }
          }
      }

      const Register = {
          template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
          // 所有的路由规则
          routes: [{
              path: '/',
              redirect: '/user'
          }, {
              path: '/user/:id',
              component: User
          }]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
          el: '#app',
          data: {},
          // 挂载路由实例对象
          // router: router
          router
      })
    </script>
  </body>
</html>